<template>
  <div class="app-container" style="height: 100%;">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane name="first">
        <template #label>
          <span class="custom-tabs-label">
            <span>占用金额明细 ({{ tableData?.length || 0 }})</span>
          </span>
        </template>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <span class="custom-tabs-label">
            <span>释放金额明细 ({{ tableData2.length || 0 }})</span>
          </span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <!-- ***********占用*********** -->
    <div v-if="activeName == 'first'" class="app-container-inner" v-loading="loading" element-loading-text="加载中...">
      <div class="header_search">
        <el-select class="input-item mr5" placeholder="工单类型" filterable clearable v-model="ListData.moduleId"
          :remote-method="getworkModulePageSelectChange" :loading="loading" remote remote-show-suffix>
          <el-option v-for="item in modules" :value="item.id" :disabled="item.select" :label="`${item.name}`" />
        </el-select>
        <el-select class="input-item mr5" v-model="ListData.dateType" placeholder="占用时间" clearable
          @change="ListData.dateType == 4 ? '' : getList()">
          <el-option v-for="item in timeOptions" :key="item.value" :value="item.value" :label="item.title" />
        </el-select>
        <div class="select-time mr5" v-if="ListData.dateType == 4">
          <el-date-picker v-model="valValue" type="daterange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="dateChange" value-format="YYYY-MM-DD HH:mm:ss" />
        </div>
        <el-input v-model="ListData.keyword" placeholder="工单号/流水号" class="input-with" clearable
          @keyup.enter.native="getList">
        </el-input>
        <button class="btn btn-bg1  mr5" @click="getList">
          <el-icon class="mr5">
            <Search />
          </el-icon>搜索
        </button>
        <button class="btn btn-bg5" @click="clearValueFee">
          <el-icon class="mr5">
            <RefreshRight />
          </el-icon>重置
        </button>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData" ref="tableList" height="100%" style="position: absolute;">
          <el-table-column show-overflow-tooltip type="index" label="序号" fixed width="50" />
          <el-table-column show-overflow-tooltip prop="code" label="占用单号" min-width="160">
            <template v-slot="i">
              <span class="color_text" @click="showDetail(i.row.id)">{{ i.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="workNo" label="关联工单" min-width="150">
            <template v-slot="i">
              <span class="color_text" @click="pageGo(i.row.id)">{{ i.row.workNo }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="module" label="工单类型" min-width="150" />
          <el-table-column show-overflow-tooltip prop="totalMoney" label="占用总金额" min-width="150" align="right">
            <template v-slot="i">
              ￥{{ i.row.totalMoney.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="creatTime" label="占用时间" sortable width="150" />
        </el-table>
      </div>
      <div class="footer">
        <Pagination ref="pagination" :list_total="total" @size-change="getList" @current-change="getList" />
      </div>
    </div>
    <!--  *************** 释放****************** -->
    <div v-else class="app-container-inner" v-loading="loading" element-loading-text="加载中...">
      <div class="header_search">
        <el-select class="input-item mr5" placeholder="工单类型" filterable clearable v-model="UnFeeData.moduleId"
          :remote-method="getworkModulePageSelectChange" :loading="loading" remote remote-show-suffix>
          <el-option v-for="item in modules" :value="item.id" :disabled="item.select" :label="`${item.name}`" />
        </el-select>
        <el-select class="input-item mr5" v-model="UnFeeData.dateType" placeholder="释放时间" clearable
          @change="UnFeeData.dateType == 4 ? '' : getList2()">
          <el-option v-for="item in timeOptionsUn" :key="item.value" :value="item.value" :label="item.title" />
        </el-select>
        <div class="select-time mr5" v-if="UnFeeData.dateType == 4">
          <el-date-picker v-model="valValue2" type="daterange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="dateChangeUn" value-format="YYYY-MM-DD HH:mm:ss" />
        </div>
        <el-input v-model="UnFeeData.keyword" placeholder="工单号/流水号" class="input-with" clearable
          @keyup.enter.native="getList2">
        </el-input>
        <button class="btn btn-bg1 mr5" @click="getList2">
          <el-icon class="mr5">
            <Search />
          </el-icon>搜索
        </button>
        <button class="btn btn-bg5" @click="clearValue">
          <el-icon class="mr5">
            <RefreshRight />
          </el-icon>重置
        </button>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData2" ref="tableList" height="100%" style="position: absolute;">
          <el-table-column show-overflow-tooltip type="index" label="序号" fixed width="50" />
          <el-table-column show-overflow-tooltip prop="code" label="释放单号" min-width="160">
            <template v-slot="i">
              <span class="color_text" @click="showUnDetail(i.row.id)">{{ i.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="workNo" label="关联工单" min-width="150">
            <template v-slot="i">
              <span class="color_text" @click="pageGo(i.row.id)">{{ i.row.workNo }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="module" label="工单类型" min-width="150" />
          <el-table-column show-overflow-tooltip prop="totalMoney" label="释放总金额" align="right" min-width="150">
            <template v-slot="i">
              ￥{{ i.row.totalMoney.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="creatTime" label="释放时间" sortable width="150" />
        </el-table>
      </div>
      <div class="footer">
        <Pagination ref="pagination" :list_total="total2" @size-change="getList2" @current-change="getList2" />
      </div>
    </div>
    <!-- 占用详情弹窗 -->
    <el-drawer v-model="DrawerFee" title="占用详情" show-close size="40%">
      <h3 class="title_header">基本信息</h3>
      <el-form v-if="freeDetailObj" label-width="auto" :model="freeDetailObj" class="basic_information">
        <el-row>
          <el-col :lg="12" :sm="24">
            <el-form-item label="占用单号:">
              <span class="ml ">{{ freeDetailObj.code
                }}</span>
            </el-form-item>
            <el-form-item label="关联工单:">
              <span class="ml ">{{ freeDetailObj.workNo
                }}</span>
            </el-form-item>
            <el-form-item label="工单类型:">
              <span class="ml ">{{ freeDetailObj.module
                }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :sm="24">
            <el-form-item label="占用时间:">
              <span class="ml">{{ freeDetailObj.creatTime }}</span>
            </el-form-item>
            <el-form-item label="占用总金额:">
              <span class="ml " style="color: rgba(255, 0, 0, 1);">￥{{ freeDetailObj.totalMoney.toFixed(2)
                }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <h3 class="title_header">费用信息</h3>
      <el-table border stripe resizable :data="freeDetailObj?.feeDetails" ref="tableList" max-height="60vh"
        style="margin-top: 6px;">
        <el-table-column show-overflow-tooltip type="index" label="序号" fixed width="50" />
        <el-table-column show-overflow-tooltip prop="feeType" label="费用类型">
          <template v-slot="i">
            <span>{{ i.row.feeType == 1 ? '报单费' : i.row.feeType == 2 ? '配件费' : '服务费' }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="feeNames" label="费用名称" />
        <el-table-column show-overflow-tooltip prop="fee" label="费用金额">
          <template v-slot="i">
            <span>￥{{ i.row.fee.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="creatTime" label="占用说明" width="190">
          <template v-slot="i">
            <span style="color:  
               rgba(255, 0, 0, 1);">工单申请服务费，占用￥{{ i.row.fee.toFixed(2) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <!-- 释放详情弹窗 -->
    <el-drawer v-model="DrawerUnFee" title="释放详情" show-close size="40%">
      <h3 class="title_header">基本信息</h3>
      <el-form v-if="freeUnDetailObj" label-width="auto" :model="freeUnDetailObj" class="basic_information">
        <el-row>
          <el-col :lg="12" :sm="24">
            <el-form-item label="释放单号:">
              <span class="ml ">{{ freeUnDetailObj.code
                }}</span>
            </el-form-item>
            <el-form-item label="关联工单:">
              <span class="ml ">{{ freeUnDetailObj.workNo
                }}</span>
            </el-form-item>
            <el-form-item label="工单类型:">
              <span class="ml ">{{ freeUnDetailObj.module
                }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :sm="24">
            <el-form-item label="释放时间:">
              <span class="ml">{{ freeUnDetailObj.creatTime }}</span>
            </el-form-item>
            <el-form-item label="释放总金额:">
              <span class="ml " style="color: rgba(255, 0, 0, 1);">￥{{ freeUnDetailObj.totalMoney.toFixed(2)
                }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <h3 class="title_header">费用信息</h3>
      <el-table border stripe resizable :data="freeUnDetailObj.feeDetails" ref="tableList" max-height="60vh"
        style="margin-top: 6px;">
        <el-table-column show-overflow-tooltip type="index" label="序号" fixed width="50" />
        <el-table-column show-overflow-tooltip prop="feeType" label="费用类型">
          <template v-slot="i">
            <span>{{ i.row.feeType == 1 ? '报单费' : i.row.feeType == 2 ? '配件费' : '服务费' }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="feeNames" label="费用名称" />
        <el-table-column show-overflow-tooltip prop="fee" label="费用金额">
          <template v-slot="i">
            <span>￥{{ i.row.fee.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="creatTime" label="释放说明" width="190">
          <template v-slot="i">
            <span style="color:  
               rgba(255, 0, 0, 1);">工单申请服务费，占用￥{{ i.row.fee.toFixed(2) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { getFreezeList, getUnfreezeList, getFreezeDetail, getUnfreezeDetail } from '../../../api/finance'
import { workModulePageSelect } from '../../../api/order'
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Delete, Warning } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const pagination = ref()
const tableData = ref([])
const tableData2 = ref([])
const total = ref(0)
const total2 = ref(0)
const valValue = ref()
const valValue2 = ref()
const DrawerFee = ref(false)//占用详情弹窗
const DrawerUnFee = ref(false)//释放弹窗
// 占用搜索
const ListData = ref({
  "dateFieldType": 1,//时间字段类型：1-提款时间
  "dateType": null,//时间类型：1-今天，2-本月，3-近三个月，4-时间区间
  "endTime": "",//扣款结束时间
  "keyword": "",	//关键词搜索：工单号/流水号
  "limit": 0,
  "moduleId": null,//	工单类型
  "page": 0,
  "startTime": ""//	扣款开始时间
})
// 释放搜索
const UnFeeData = ref({
  "dateType": null,//	时间类型：1-今天，2-本周，3-过去三个月，4-时间区间	
  "endTime": "",
  "keyword": "",
  "limit": 0,
  "moduleId": null,
  "page": 0,
  "startTime": ""
})
const activeName = ref('first')
const handleClick = (val) => {
  // switch (val.paneName) {
  //   case 'first':
  //     getList()
  //     break;
  //   case 'second':
  //     getList2()
  //     break;
  // }
}
// 工单详情
const pageGo = (id) => {
  router.push('/order/odetail/' + id)
}
// 占用详情
const freeDetailObj = ref()
const showDetail = async (id) => {
  loading.value = true
  await getFreezeDetail(id).then(res => {
    freeDetailObj.value = res.data.data.row
  })
  DrawerFee.value = true
  loading.value = false
}
// 释放详情
const freeUnDetailObj = ref()
// 释放弹窗显示
const showUnDetail = async (id) => {
  loading.value = true
  await getUnfreezeDetail(id).then(res => {
    freeUnDetailObj.value = res.data.data.row
  })
  DrawerUnFee.value = true
  loading.value = false

}
// 占用时间
const timeOptions = ref([
  { title: '今天', value: 1 },
  { title: '本月', value: 2 },
  { title: '过去三个月', value: 3 },
  { title: '时间区间', value: 4 },
])
// 释放时间
const timeOptionsUn = ref([
  { title: '今天', value: 1 },
  { title: '本周', value: 2 },
  { title: '过去三个月', value: 3 },
  { title: '时间区间', value: 4 },
])
// 获取占用列表
const getList = async () => {
  loading.value = true
  ListData.value.limit = pagination.value.size
  ListData.value.page = pagination.value.current
  await getFreezeList(ListData.value).then((res: any) => {
    total.value = parseInt(res.data.data.total)

    tableData.value = res.data.data.rows
  })
  loading.value = false
}
// 获取释放列表
const getList2 = async () => {
  loading.value = true
  UnFeeData.value.limit = pagination.value.size
  UnFeeData.value.page = pagination.value.current
  await getUnfreezeList(UnFeeData.value).then((res: any) => {
    if (!res.data.success) {
      ElMessage({
        message: res.data.message,
        type: 'error',
        duration: 3000,
      })

    } else {
      total2.value = parseInt(res.data.data.total)

      tableData2.value = res.data.data.rows
    }


  })
  loading.value = false
}
// 占用时间变化时
const dateChange = (val: any) => {
  if (val) {
    // popoverDom1.value.hide()
    ListData.value.startTime = val[0]
    ListData.value.endTime = val[1]
  } else {
    ListData.value.startTime = null
    ListData.value.endTime = null
  }
  getList()
}
// 释放时间变化时
const dateChangeUn = (val: any) => {
  if (val) {
    UnFeeData.value.startTime = val[0]
    UnFeeData.value.endTime = val[1]
  } else {
    UnFeeData.value.startTime = null
    UnFeeData.value.endTime = null
  }
  getList2()
}
// **********工单模块下拉数据*********
const modules = ref([])
const getworkModulePageSelect = (val) => {
  let data = {
    "limit": 0,
    "keyword": val,
    "page": 0
  }
  workModulePageSelect(data).then((res) => {
    if (res.data.success) {
      modules.value = res.data.data.rows
    }
  })
}
const modelValue = ref('')
const getworkModulePageSelectChange = (val) => {
  modelValue.value = val
}
watch(modelValue, (n) => {
  getworkModulePageSelect(n)
})
// *****************end************
// 重置
const clearValueFee = () => {
  ListData.value = {
    "dateFieldType": null,//时间字段类型：1-提款时间
    "dateType": null,//时间类型：1-今天，2-本月，3-近三个月，4-时间区间
    "endTime": "",//扣款结束时间
    "keyword": "",	//关键词搜索：工单号/流水号
    "limit": 0,
    "moduleId": null,//	工单类型
    "page": 1,
    "startTime": ""//	扣款开始时间
  }
}
// 重置
const clearValue = () => {
  UnFeeData.value = {
    "dateType": null,
    "endTime": "",
    "keyword": "",
    "limit": 0,
    "moduleId": null,
    "page": 1,
    "startTime": ""
  }
}
onMounted(() => {
  new Promise(() => {
    getList()
    getList2()
    getworkModulePageSelect('')
  })
})

</script>

<style scoped lang="scss">
@import './index';
</style>
